import { h, Component, Fragment } from 'preact';
import { Link } from 'preact-router';
import { Tab } from '../../components';

const data = [
	{ id: 1, title: '帝国cms列表页调用关键字tag标签',readNum: 10,readFlag: '1',createdDate: '2018-07-26',img: './assets/images/mb3.jpg', desc: '有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面温南南博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大... ',href: '/study/web/35.html',content: '' },
	{ id: 2, title: '帝国cms列表页调用关键字tag标签',readNum: 10,readFlag: '1',createdDate: '2018-07-26',img: './assets/images/mb3.jpg', desc: '有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面温南南博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大... ',href: '/study/web/35.html',content: '' },
	{ id: 3, title: '帝国cms列表页调用关键字tag标签',readNum: 10,readFlag: '1',createdDate: '2018-07-26',img: './assets/images/mb3.jpg', desc: '有很多朋友都在问帝国cms列表页怎么调用关键字tag，tag作为内链手法，对于SEO有一定的好处，下面温南南博客就实例讲述一下帝国cms列表页面调用关键字tag标签的方法，分享给大... ',href: '/study/web/35.html',content: '' }
];

const ArticleItem = ({ href,img,title,desc,readNum,readFlag,createdDate,content }) => (
	<div className="blogs"
		data-scroll-reveal="enter bottom over 1s"
		data-scroll-reveal-id="2"
		style="-webkit-transform: translatey(0);transform: translatey(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;"
		data-scroll-reveal-initialized="true"
	>
		<h3 className="blogtitle">
			<a href={href}>{title}</a>
		</h3>
		<span className="blogpic">
			<a href={href} title={title}>
				<img src={img} alt={title} />
			</a>
		</span>
		<p className="blogtext">{desc}</p>
		<div className="bloginfo">
			<ul>
				<li className="author" />
				<li className="lmname">
					<Link href="/study/web/" target="_blank">网站建设</Link>
				</li>
				<li className="timer">{createdDate}</li>
				<li className="view"><span>{readNum}</span>{readFlag==1?'已阅读':'未读'}</li>
			</ul>
		</div>
	</div>
);

const Study = ({ }) => (
	<article style="position: relative;">
		<main>
			<Tab defaultActive="a">
				<Tab.Panel tab="a" title="学习笔记">
					{
						data.map(i => <ArticleItem key={i} {...i} />)
					}
					<div className="pagelist"><a title="Total record">&nbsp;<b>25</b> </a>&nbsp;&nbsp;&nbsp;<b>1</b>&nbsp;<a href="/study/index_2.html">2</a>&nbsp;<a href="/study/index_2.html">下一页</a>&nbsp;<a href="/study/index_2.html">尾页</a></div>
				</Tab.Panel>
				<Tab.Panel tab="b" title="网站建设" >
						欧还木有想好干嘛
				</Tab.Panel>
			</Tab>
		</main>
		<aside className="r_box" style="position: static; left: auto; width: 30%;">
			<div className="tuijian">
				<h2 id="tab"><a href="#" className="current">点击排行</a><a href="#">最近更新</a><a href="#">站长推荐</a></h2>
				<div id="content">
					<ul style="display:block;">
						<li><a href="/study/web/1.html" target="_blank">个人博客模板《show time》蓝色版 </a></li>
						<li><a href="/study/biji/32.html" target="_blank">鼠标悬停图片、文字css3效果 </a></li>
						<li><a href="/study/biji/34.html" target="_blank">我们可以从CSS框架中借鉴到什么 </a></li>
						<li><a href="/study/web/35.html" target="_blank">帝国cms列表页调用关键字tag标签 </a></li>
						<li><a href="/study/biji/26.html" target="_blank">分享我的个人博客访问量如何做到IP从10到2000... </a></li>
						<li><a href="/study/biji/29.html" target="_blank">IE6到底哪里不好？你还继续用IE6吗？ </a></li>
						<li><a href="/study/biji/23.html" target="_blank">【心路历程】请不要在设计这条路上徘徊啦 </a></li>
						<li><a href="/study/biji/27.html" target="_blank">帝国cms常用标签调用方法总结（不得不收藏哦）... </a></li>
						<li><a href="/study/biji/25.html" target="_blank">【匆匆那些年】总结个人博客经历的这四年… </a></li>
						<li><a href="/study/web/43.html" target="_blank">帝国cms 栏目高级调用 高亮并且二级栏目增加样... </a></li>
						<li><a href="/study/web/36.html" target="_blank">帝国cms去掉广告图片的高和宽 </a></li>
						<li><a href="/study/web/37.html" target="_blank">个人博客模板《More》后台管理 </a></li>
					</ul>
					<ul>
						<li><a href="/study/web/1.html" target="_blank">个人博客模板《show time》蓝色版 </a></li>
						<li><a href="/study/web/35.html" target="_blank">帝国cms列表页调用关键字tag标签 </a></li>
						<li><a href="/study/web/36.html" target="_blank">帝国cms去掉广告图片的高和宽 </a></li>
						<li><a href="/study/web/37.html" target="_blank">个人博客模板《More》后台管理 </a></li>
						<li><a href="/study/web/38.html" target="_blank">帝国cms结合项如何实现多条件查询 </a></li>
						<li><a href="/study/web/39.html" target="_blank">帝国cms 如何使用静态页面？ </a></li>
						<li><a href="/study/web/40.html" target="_blank">个人博客模板《show time》后台管理 </a></li>
						<li><a href="/study/web/41.html" target="_blank">帝国cms 封面模板标题调用栏目别名的方法 </a></li>
						<li><a href="/study/web/42.html" target="_blank">个人博客用帝国cms 自定义页面 灵动标签调用网... </a></li>
						<li><a href="/study/web/43.html" target="_blank">帝国cms 栏目高级调用 高亮并且二级栏目增加样... </a></li>
						<li><a href="/study/web/44.html" target="_blank">帝国cms 列表页调用子栏目，没有则不显示栏目... </a></li>
						<li><a href="/study/web/45.html" target="_blank">个人博客模板《绅士》后台管理 </a></li>
					</ul>
					<ul>
						<li><a href="/study/web/35.html" target="_blank">帝国cms列表页调用关键字tag标签 </a></li>
						<li><a href="/study/biji/23.html" target="_blank">【心路历程】请不要在设计这条路上徘徊啦 </a></li>
						<li><a href="/study/biji/25.html" target="_blank">【匆匆那些年】总结个人博客经历的这四年… </a></li>
						<li><a href="/study/biji/26.html" target="_blank">分享我的个人博客访问量如何做到IP从10到2000... </a></li>
						<li><a href="/study/biji/27.html" target="_blank">帝国cms常用标签调用方法总结（不得不收藏哦）... </a></li>
						<li><a href="/study/biji/28.html" target="_blank">使用ASPCMS建站网站被黑 </a></li>
						<li><a href="/study/biji/29.html" target="_blank">IE6到底哪里不好？你还继续用IE6吗？ </a></li>
						<li><a href="/study/biji/30.html" target="_blank">css技巧以及经验总结 </a></li>
						<li><a href="/study/biji/31.html" target="_blank">IE常见bugs以及解决方案列表 </a></li>
						<li><a href="/study/biji/32.html" target="_blank">鼠标悬停图片、文字css3效果 </a></li>
						<li><a href="/study/biji/33.html" target="_blank">从摄影作品中获取网页颜色搭配技巧 </a></li>
					</ul>
				</div>
			</div>
			<div className="wdxc">
				<h2>图文精选</h2>
				<ul>
					<li><a href="/study/biji/25.html" title="【匆匆那些年】总结个人博客经历的这四年…" target="_blank"><img src="./assets/images/072f267a54748c6e71d40a2d03978993.jpg" /></a></li>
				</ul>
			</div>
			<div className="guanzhu">
				<h2>关注我 么么哒</h2>
				<ul>
					<img src="./assets/images/wx.jpg" />
				</ul>
			</div>
		</aside>
	</article>
);

Study.propTypes = {

};

export default Study;
